<template>
  <div class="goods-container">
    <!-- 左侧图片和复选框区域 -->
    <div class="left">
      <!-- 复选框 -->
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" :id="id" :checked="checked" @change="onCheckBoxChange" />
        <!-- 将商品图片包裹于 label 之中，点击图片可以切换“复选框”的选中状态 -->
        <label class="custom-control-label" :for="id">
          <img :src="thumb" alt="商品图片" class="thumb" />
        </label>
      </div>
    </div>
    <!-- 右侧信息区域 -->
    <div class="right">
      <!-- 商品名称 -->
      <div class="top">{{ title }}</div>
      <div class="bottom">
      <!-- 商品价格 -->
      <div class="price">￥{{ price.toFixed(2) }}</div>
      <!-- 商品数量 -->
      <div class="count">
        <!-- 指定数量的最小值为 1 -->
        <es-counter :num="count" :min="1" @numChange="getNumber"></es-counter>
      </div>
    </div>
  </div>
</div>
</template>
<script>
// 导入 counter 组件
import EsCounter from '../es-counter/EsCounter.vue'
export default {
  name: 'EsGoods',
  props: {
    id: { // 唯一的 key 值
      type: [String, Number], // id 的值可以是“字符串”也可以是“数值”
      required: true,
    },
    thumb: {  // 1. 商品的缩略图
      type: String,
      required: true,
    },
    title: {  // 2. 商品的名称
      type: String,
      required: true,
    },
    price: {  // 3. 单价
      type: Number,
      required: true,
    },
    count: {  // 4. 数量
      type: Number,
      required: true,
    },
    checked: {  // 5. 商品的勾选状态
      type: Boolean,
      required: true,
    },
  },
  methods: {
    onCheckBoxChange(e) { // 监听复选框选中状态变化的事件
      console.log(e.target.checked) // e.target.checked 是最新的勾选状态
      this.$emit('stateChange', { // 向外发送的数据是一个对象，包含了 { id, value } 两个属性
        id: this.id,
        value: e.target.checked,
      })
    },
    getNumber(num) {  // 监听数量变化的事件
      // 触发自定义事件，向外传递数据对象 { id, value }
      this.$emit('countChange', {
        id: this.id,  // 商品的 id
        value: num, // 最新的数量
      })
    },
  },
  emits: ['stateChange', 'countChange'],
  components: {
    EsCounter,  // 注册 counter 组件
  }
}
</script>
<style lang="less" scoped>
.goods-container {
  display: flex;
  padding: 10px;
  /* 最终生成的选择器为 .goods-container + .goods-container */
  /* 在 css 中，（+）是“相邻兄弟选择器”，表示：选择紧连着另一元素后的元素，二者具有相同的父元素。 */
  + .goods-container {
    border-top: 1px solid #efefef;
  }
  .left { /* 左侧图片的样式 */
    margin-right: 10px;
    .thumb {  /* 商品图片 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: #efefef;
    }
  }
  .right {  /* 右侧商品名称、单价、数量的样式 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .top {
      font-weight: bold;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
}
.custom-control-label::before,
.custom-control-label::after {
  top: 3.4rem;
}
</style>